<template>
	<view class="container">
		<!-- 第一区块：图文详情 -->
		<view class="detail-card" v-if="seele.page_near_top.length>0">
			<image class="detail-img" :src="data.tui_shop.avatar" mode="aspectFill"></image>
			<!-- 新增置顶标签 -->
			<view class="top-tag">置顶商家</view>
			<!-- 右侧内容区域 -->
			<view class="content">
				<!-- 标题和按钮行 -->
				<view class="title-row">
					<text class="shop-title">{{data.tui_shop.shopname}}</text>
					<view class="enter-btn" @click="shopDetail(data.tui_shop.id)">进店
					</view>
				</view>
				<!-- 数据信息行 -->
				<view class="info-row">
					<text class="font-mx">{{data.tui_shop.score}}分</text>
					<text>月售{{data.tui_shop.monthly_sales_order}}+</text>
					<text>人均¥{{data.tui_shop.per_capita}}</text>
					<!-- 距离信息 -->
					<text class="distance">距您{{Math.round(data.tui_shop.distance / 1000)}}公里</text>
				</view>

				<!-- 标签区域 -->
				<view class="tags">
					<!-- <text class="tag bg">{{seele.page_near_top[0].keywords}}</text> -->
					<text v-for="item in data.tui_shop.service_ids" class="tag bg">{{item}}</text>
					<text v-if="data.tui_shop.self_recive==1" class="tag red">支持自取</text>
				</view>
			</view>
		</view>

		<!-- 第二区块：三图陈列 -->
		<view class="goods-row">
			<view v-for="(item, index) in data.tui_shop.goods" :key="index" class="goods-column">
				<image class="goods-thumb" :src="$wanlshop.oss(item.image)" mode="aspectFill" />
				<text class="goods-title">{{ item.shopname }}</text>
				<view class="goods-op">
					<view class="price-section">
						<view class="price-current">¥{{ item.price }}</view>
						<view class="price-original">¥{{ item.old_price }}</view>
					</view>
					<view class="action-button" @click="goodsDetail(item.id)">开抢啦</view>
				</view>
			</view>
		</view>

		<!-- 广告-->
	<!-- 	<view class="section-f">
			<image class="ad-img" :src="$wanlshop.oss(seele.page_conf.adv_img_4)" mode="aspectFill"></image>
		</view> -->
		<!-- <seele-goodsad></seele-goodsad> -->


		<!-- 其他商品-->

		<!-- <view v-for="(item,index) in this.$props.data.list" :key="index"> -->
			<!-- <view v-if="index%5==0" style="display: block;margin-bottom: 15rpx;">
				<seele-goodsad1 :databa='item'
					v-if="seele.page_near_top.length>1 && seele.page_near_top[1].goods.length>0&&index%5==0"></seele-goodsad1>
			</view> -->
			<!-- <view class="detail-card other-op" style="display: block;">
				<image class="detail-img" :src="$wanlshop.oss(item.avatar)" mode="aspectFill"></image>
				 右侧内容区域
				<view class="content">
				 标题和按钮行 
					<view class="title-row">
						<text class="shop-title">{{item.shopname}}</text>
						<view class="enter-btn" @tap="$wanlshop.to('/pages/shop/index?id='+item.id)">进店</view>
					</view>

					
				</view>
			</view> -->
			<view class="detail-card other-op" v-for="(item,index) in data.list" :key="index">
				<image class="detail-img" :src="$wanlshop.oss(item.avatar)" mode="aspectFill"></image>
				<!-- 右侧内容区域 -->
				<view class="content">
					<!-- 标题和按钮行 -->
					<view class="title-row">
						<text class="shop-title">{{item.shopname}}</text>
						<view class="enter-btn" @click="shopDetail(item.id)">进店</view>
					</view>
			
			
					<!-- 数据信息行 -->
					<view class="info-row">
						<text class="font-mx">{{item.score}}分</text>
						<text>月售{{item.monthly_sales_order}}+</text>
						<text>人均¥{{item.per_capita}}</text>
						<!-- 距离信息 -->
						<text class="distance">距您{{Math.round(item.distance / 1000)}}公里</text>
					</view>
			
					<!-- 标签区域 -->
					<view class="tags">
						<!-- <text class="tag bg">{{item.keywords}}</text> -->
						<text v-for="(con,num) in item.service_ids" class="tag bg">{{con}}</text>
						<text v-if="item.self_recive==1" style="display: block;" class="tag red">支持自取</text>
					</view>
				</view>
			</view>
		<!-- </view> -->

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props: {
			data: Object
		},
		computed: {
			...mapState(['seele'])
		},
		data() {
			return {

			}
		},
		created() {
			console.log(this.$props.data, "...................")
		},
		methods: {
			shopDetail(id){
				console.log(id)
				uni.navigateTo({
					url: '/pages/dispatch/shopDetails/shopDetails?id='+id
				})
			},
			goodsDetail(id){
				uni.navigateTo({
					url: '/pages/dispatch/groupBuying/groupBuying?id='+id
				})
			},
			handleBuy(index) {
				uni.showToast({
					title: `抢购成功：${this.promoGoods[index].title}`,
					icon: 'none'
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		background: #f5f5f5;
	}

	/* 第一区块样式 */
	.detail-card {
		display: flex;
		padding: 25rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.top-tag {
			position: absolute;
			top: 35rpx;
			left: 35rpx;
			background: #ff4444;
			color: #fff;
			font-size: 24rpx;
			padding: 6rpx 20rpx;
			border-radius: 8rpx;
			z-index: 2;
			transform: translateZ(1px); // 解决部分安卓机渲染问题
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

			&::before {
				content: '';
				position: absolute;
				right: -8rpx;
				top: 50%;
				width: 0;
				height: 0;
				border: 8rpx solid transparent;
				border-left-color: #ff4444;
				transform: translateY(-50%);
			}
		}

		.detail-img {
			width: 220rpx;
			height: 220rpx;
			border-radius: 12rpx;
			margin-right: 25rpx;
		}

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.title-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;
		}

		.shop-title {
			font-size: 32rpx;
			font-weight: bold;
			max-width: 300rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.enter-btn {
			background: #e64340;
			color: #fff;
			padding: 8rpx 25rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
		}

		.info-row {
			display: flex;
			gap: 20rpx;
			color: #666;
			font-size: 20rpx;
			line-height: 40rpx;

			.font-mx {
				font-size: 23rpx;
				color: #FB4C2D;
			}
		}

		.distance {
			color: #FB4C2D;
			font-size: 20rpx;
			position: absolute;
			right: 25rpx;
		}

		.tags {
			margin-top: 15rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 10rpx;
		}

		.tag {
			font-size: 20rpx;
			color: #FB4C2D;
			border-radius: 6rpx;
			padding: 4rpx 10rpx;
		}

		.tag.bg {
			background-color: #FFD4CD;
		}

		.tag.red {
			color: #FB4C2D;
			border-color: #FB4C2D;
			border: 1rpx solid #FB4C2D;
		}

	}

	/* 其他*/
	.other-op {
		margin: 20rpx 0;
	}

	/* 第二区块样式 */
	.goods-row {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;

		.goods-column {
			width: 31%;
			position: relative;

			.goods-thumb {
				width: 100%;
				height: 204rpx;
				border-radius: 12rpx;
				margin-bottom: 15rpx;
			}

			.goods-title {
				display: block;
				font-size: 31rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}

			.price-section {
				display: grid;
				align-items: baseline;
				margin: 15rpx 0;
				width: 50%;

				.price-current {
					color: #ff4444;
					font-size: 28rpx;
					font-weight: bold;
					margin-right: 15rpx;
				}

				.price-original {
					color: #999;
					font-size: 24rpx;
					text-decoration: line-through;
				}
			}

			.action-button {
				background: #ff4444;
				color: #fff;
				font-size: 19rpx;
				text-align: center;
				padding: 12rpx 0;
				border-radius: 50rpx;
				transition: all 0.3s;
				width: 110rpx;
				position: absolute;
				right: 10rpx;
				bottom: 35rpx;

				&:active {
					background: darken(#ff4444, 10%);
					transform: scale(0.95);
				}
			}
		}
	}

	.goods-op {
		display: block;

	}
</style>
<style scoped lang="scss">
	.section-f {
		margin: 40rpx 29rpx 29rpx 29rpx;
		border-radius: 30rpx;

		.ad-img {
			border-radius: 30rpx;
			width: 696rpx;
			height: 520rpx;
		}
	}
</style>